<template>
  <div class="module-base">
    <hz-header :isRouter="false"></hz-header>
    <div class="banner-wrap">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <img :src="item" alt="">
        </swiper-slide>
      </swiper>
    </div>
    <div class="main">
      <slot></slot>
    </div>
    <hz-footer></hz-footer>
  </div>
</template>

<script>
  import hzHeader from 'COMPS/hz-header.vue'
  import hzFooter from 'COMPS/hz-footer.vue'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'module-base',
    components: {
      hzHeader,
      hzFooter,
      swiper,
      swiperSlide,
    },
    data() {
      return {
        bannerList: [
          'https://docs.alibabagroup.com/assets2/images/cn/home/home_banner_1.png',
          'https://www.tencent.com/images/index/planet.jpg',
          'https://docs.alibabagroup.com/assets2/images/cn/home/home_banner_3.png'
        ],
        swiperOption: {
          loop: true,
          observer:true,
          observeParents:true,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false, 
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .module-base {
    .banner-wrap {
      .swiper-container  {
        height: 750px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .main {
      width: 1200px;
      margin: 0 auto;
    }
  }
</style>